<template>
  <div>
    <el-image  
    @click="open" 
    :style="{width:width, height: width}" 
    :src="path" 
    fit="contain" />
    <Teleport to="body">
      <el-image-viewer
      :preview-teleported="true"
      v-if="dialogVisible"
      :url-list="picture"
      @close="close"
      />
    </Teleport>
  </div>
</template>

<script lang="ts" setup> 
import { ref, defineProps, defineEmits,watch,toRefs,computed } from "vue";
const props = defineProps({
  width:{
    default:'50px'
  },
  path:{
    type:String,
  }
})
const dialogVisible = ref(false);
const picture:any = ref([])
const close = () => {
  dialogVisible.value=false
}
const open = () => {
  dialogVisible.value=true
  picture.value = [props.path]
  console.log(picture.value);
  
}
</script>

<style lang="scss" scoped>

</style>